<template>
  <div>
    <!-- 搜索框 -->
    <input v-model="searchKeyword" @input="search" placeholder="搜索" />
    <button @click="openAddPopup" class="add">新增</button>

    <!-- 列表展示 -->
    <li v-for="(item, index) in filteredItems" :key="index" class="list-item">
  <div class="item-content">
    <div class="title-and-edit">
      <strong>{{ item.title }}</strong>
      <button @click="editItem(index)" class="edit">编辑</button>
    </div>
    <p class="description">{{ item.description }}</p>
    <div class="time-and-delete">
      <p>当前时间：{{ currentTime }}</p>
      <button @click="removeItem(index)" class="dele">删除</button>
    </div>
  </div>
</li>

    <!-- 弹出表单 -->
    <div v-if="showPopup" class="popup">
      <div class="popup-content">
        <h2>{{ popupTitle }}</h2>
        <input v-model="formTitle" class="title1" placeholder="标题" />
        <textarea v-model="formDescription" class="des" placeholder="描述"></textarea>       
        <button @click="save" class="sure">确定</button>
        <button @click="cancel" class="del">取消</button>
      </div>
    </div>

   
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const searchKeyword = ref('');
const showPopup = ref(false);
const popupTitle = ref('新增');
const formTitle = ref('');
const formDescription = ref('');

const isEditing = ref(false);
const currentIdx = ref<number | null>(null);
const items = ref<{ title: string; description: string;  }[]>([]);
const currentTime = ref(new Date().toLocaleString());

const search = () => {
  // 目前搜索功能只用来展示过滤后的结果
};

const save = () => {
  if (isEditing.value) {
    if (currentIdx.value !== null) {
      items.value[currentIdx.value] = {
        title: formTitle.value,
        description: formDescription.value,   
      };
    }
  } else {
    items.value.push({
      title: formTitle.value,
      description: formDescription.value
      
    });
  }
  resetForm();
};

const cancel = () => {
  resetForm();
};
const updateTime = () => {
      currentTime.value = new Date().toLocaleString();
    };


const editItem = (index: number) => {
  currentIdx.value = index;
  isEditing.value = true;
  popupTitle.value = '编辑';
  formTitle.value = items.value[index].title;
  formDescription.value = items.value[index].description;
 
  showPopup.value = true;
};
const removeItem = (index) => {
      items.value.splice(index, 1);
      updateTime();
    };

const openAddPopup = () => {
  resetForm();
  popupTitle.value = '新增';
  showPopup.value = true;
};

const resetForm = () => {
  formTitle.value = '';
  formDescription.value = '';
  showPopup.value = false;
  isEditing.value = false;
  currentIdx.value = null;
};

const filteredItems = computed(() => {
  return items.value.filter(item => item.title.includes(searchKeyword.value));
});
</script>

<style scoped>
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.popup-content {
  display: flex;
  flex-direction: column;
}

.popup-content input,
.popup-content textarea {
  margin-bottom: 10px;
}

.popup-content button {
  margin-right: 10px;
}
.list{
 
  list-style-type: none; /* 去掉默认的列表样式 */
  padding: 0; /* 去掉默认的内边距 */
  border: 1px solid black; /* 为整个列表添加边框 */
}
.list-item {
  border-bottom: 1px solid #ddd; /* 为每个列表项添加底部边框 */
  padding: 10px; /* 添加内边距 */
  display: flex; /* 使用 flexbox 来对齐内容 */
  flex-direction: column; /* 分配空间以分隔文本和按钮 */
  width: 300px;  /* 设置固定宽度 */
  height: 200px; /* 设置固定高度 */
  overflow: auto; /* 添加滚动条以便内容超出时仍能查看 */
  border: 1px solid #ccc; /* 可选：添加边框 */
}

.title1 {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}

.des {
  margin: 5px 0; /* 为描述添加上下内边距 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制为最多显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.item-content {
  display: flex;
  flex-direction: column;
}
.title-and-edit {
  display: flex; /* 使用 flexbox 来对齐标题和编辑按钮 */
  justify-content: space-between; /* 让标题和编辑按钮分开对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 5px; /* 让标题和描述之间有点距离 */
}

.time-and-delete {
  display: flex; /* 使用 flexbox 来对齐时间和删除按钮 */
  justify-content: space-between; /* 让时间和删除按钮分开对齐 */
  margin-top: 5px; /* 让时间和删除按钮之间有点距离 */
  flex-direction: row;
}

.description {
  margin: 5px 0; /* 为描述添加上下内边距 */
}
.edit{
  color: blue;
}
.dele{
  color: red;
}
.sure{
  background-color: skyblue;
  color: white;
  
}
.del{
  background-color: white;
  color: skyblue;
  border: 1px solid skyblue;
}
.add{
  background-color:skyblue;
  color: white;
}
</style>
